<template>
	<view class="content">
		<view class="nav flex_r_between">
			<uni-icons type="back" color="#FFF" :size="22" @click="back"></uni-icons>
			<text></text>
		</view>

		<view class="box">
			<view class="title">
				<image src="https://qiniu-cdn.maeiyun.com/imgs/technician/index/resume_title.png"></image>
			</view>
			<view class="block">
				<view class="list flex_r_between" @click="toLink('/technician/personal/qualificationsPhoto')">
					<view class="left flex">
						<image src="/static/technician/list_icon_0.png"></image>
						<text>实人认证/资质</text>
					</view>
					<view class="right flex">
						<uni-icons type="forward" :size="20" color="#333333"></uni-icons>
					</view>
				</view>
				
				<view class="list flex_r_between" @click="toLink('/technician/personal/album')">
					<view class="left flex">
						<image src="/static/technician/list_icon_6.png"></image>
						<text>个人相册</text>
					</view>
					<view class="right flex">
						<uni-icons type="forward" :size="20" color="#333333"></uni-icons>
					</view>
				</view>
				
				<view class="list flex_r_between" @click="toLink('/technician/info/resume')">
					<view class="left flex">
						<image src="/static/technician/list_icon_1.png"></image>
						<text>个人简介</text>
					</view>
					<view class="right flex">
						<uni-icons type="forward" :size="20" color="#333333"></uni-icons>
						<!-- <view class="tag" v-if="!service">立即设置</view> -->
					</view>
				</view>
				
				<view class="list flex_r_between" @click="toLink('/technician/info/service')">
					<view class="left flex">
						<image src="/static/technician/list_icon_2.png"></image>
						<text>服务项目</text>
					</view>
					<view class="right flex">
						<uni-icons type="forward" :size="20" color="#333333"></uni-icons>
						<view class="tag" v-if="!service">立即设置</view>
					</view>
				</view>
				
				<view class="list flex_r_between" @click="toLink('/technician/info/location')">
					<view class="left flex">
						<image src="/static/technician/list_icon_4.png"></image>
						<text>接单位置</text>
					</view>
					<view class="right flex">
						<uni-icons type="forward" :size="20" color="#333333"></uni-icons>
						<view class="tag" v-if="!location">立即设置</view>
					</view>
				</view>
				
				<view class="list flex_r_between no_border" @click="toLink('/technician/info/change')">
					<view class="left flex">
						<image src="/static/technician/list_icon_5.png"></image>
						<text>接单手机</text>
					</view>
					<view class="right flex">
						<uni-icons type="forward" :size="20" color="#333333"></uni-icons>
						<view class="input">{{auth.mobile || '请设置'}}</view>
					</view>
				</view>
				
				<button @click="onsubmit" v-if="!auth.apply || auth.apply <= 0">立即申请</button>
				<button v-else>{{auth.auth_status==1 ? '审核中' : '已通过'}}</button>
			</view>
		</view>

	</view>
</template>

<script>
	import http from '@/utils/https.js'
	var timestamp = Date.parse(new Date()) / 1000
	import md5 from 'js-md5'
	let Base64 = require('js-base64').Base64
	export default {
		data() {
			return {
				auth: {
					mobile: '',
				},
				auth_status:false,
				images:false,
				location:false,
				service:false,
			}
		},
		methods: {
			back(){
				uni.switchTab({
					url:'/pages/mine/mine'
				})
			},
			toLink(e){
				uni.navigateTo({
					url:e
				})
			},
			getAuth(){
				let that = this
				this.request.httpTokenRequest({
					url: "technician.technician/getAuthInfo",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						that.auth = res.data
						uni.setStorageSync('authInfo',that.auth)
						if(that.auth.person_images.length){
							let arr = that.auth.person_images[0].image.split('.')
							if(arr[arr.length-1] == 'jpg' || arr[arr.length-1] == 'jpeg' || arr[arr.length-1] == 'png' || arr[arr.length-1] == 'JPG' || arr[arr.length-1] == 'PNG'){
								that.auth.person_images[0].type = 'img'
							}else {
								that.auth.person_images[0].type = 'video'
							}
						}
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			
			
			onsubmit(){
				if(!this.auth_status || !this.images || !this.location || !this.service){
					return this.$util.msg('请填写完整资料')
				}
				
				this.request.httpTokenRequest({
					url: "technician.technician/apply",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						this.auth.apply = 1
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			
			getStatus(){
				this.request.httpTokenRequest({
					url: "technician.technician/getAuthStatus",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						this.auth_status = res.data.auth
						this.images = res.data.images
						this.location = res.data.location
						this.service = res.data.service
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},

		},
		onShow() {
			this.getAuth()
			this.getStatus()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: calc(450rpx + var(--status-bar-height)) 0 30rpx;
		background: url(https://qiniu-cdn.maeiyun.com/imgs/mine/joinUs.png) 0 0 no-repeat;
		background-size: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		min-height: 100vh;
		background-color: #3393FF;
	}

	.nav {
		// background: url(https://qiniu-cdn.maeiyun.com/imgs/mine/joinUs.png) 0 0 no-repeat;
		// background-size: 100%;
		position: fixed;
		top: 0;
		left: 0;
		padding: var(--status-bar-height) 30rpx 0;
		width: calc(100vw - 60rpx);
		z-index: 99;
		height: 44px;
		box-sizing: content-box;
	}
	
	.box {
		margin: 0 32rpx;
		background: linear-gradient(157deg, #D4EFFE 0%, #62ACF6 100%);
		box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(13, 50, 208, 0.5), inset 1rpx 3rpx 37rpx 12rpx rgba(255, 255, 255, 0.72);
		border-radius: 36rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.61);
		padding: 123rpx 26rpx 22rpx;
		position: relative;
		.title {
			width: 403rpx;
			height: 80rpx;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			image {
				width: 403rpx;
				height: 80rpx;
			}
		}
		.block {
			width: 634rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(13,50,208,0.39), inset 1rpx 3rpx 37rpx 12rpx rgba(255,255,255,0.72);
			border-radius: 36rpx;
			padding: 30rpx 32rpx;
		}
		.list {
			width: 100%;
			padding: 26rpx 0;
			border-bottom: 1rpx solid #E6E6E6;

			.left {
				image {
					width: 42rpx;
					height: 42rpx;
				}

				text {
					margin-left: 13rpx;
					font-size: 30rpx;
					color: #08090A;
					line-height: 42rpx;
				}
			}

			.right {
				flex: 1;
				align-items: center;
				flex-direction: row-reverse;

				.tag {
					width: 120rpx;
					height: 40rpx;
					background: #2E7EFA;
					border-radius: 20rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					text-align: center;
				}

				.input {
					text-align: right;
					font-size: 30rpx;
					line-height: 42rpx;
				}
			}
		}
		button {
			height: 88rpx;
			background: #2E7EFA;
			border-radius: 44rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			margin-top: 30rpx;
		}
	}
</style>